<template>
  <div  style="max-width: 80%;margin: 40px auto 0;">
    <a-row>
        <a-card v-for="(value, key) in checkData" :title="key" :key="key" style="width: 90%" :bordered="false">
          <a-table size="small" :columns="columns" :rowClassName="setRowStyle" :data-source="errorFilter(key,value)"/>
        </a-card>
    </a-row>
    <a-row :gutter="16">
      <a-col :offset="10">
        <a-checkbox v-model="onlyShowErrorRows">是否仅显示问题记录</a-checkbox>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :offset="10">
        <a-button  type="primary" @click="nextStep">下一步</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';


// 定义 props
const props = defineProps(['checkData', 'checkResult']);
// 定义 emits
const emit = defineEmits(['nextStep']);

// 定义响应式变量
const onlyShowErrorRows = ref(false);
const columns = ref([
  {
    title: '主单号',
    dataIndex: '主单号',
  },
  {
    title: '日期',
    dataIndex: '日期',
  },
  {
    title: '总金额',
    dataIndex: '总金额',
    align: 'right',
  },
  {
    title: '总金额[系统]',
    dataIndex: 'total_amount',
    align: 'right',
  },
  {
    title: '计费重量',
    dataIndex: '计费重量',
    align: 'right',
  },
  {
    title: '计费重量[系统]',
    dataIndex: 'weight',
    align: 'right',
  },
]);

// 下一步方法
const nextStep = () => {
  if (Object.keys(props.checkData).length === 0) {
    message.warning("没有要核对的数据，请先生成核对信息！");
    return;
  }
  emit('nextStep');
};

// 设置行样式方法
const setRowStyle = (record) => {
  let style = !record.verify_weight || !record.id ? 'ant-table-row-selected my-warning' : '';
  console.error("style:", style);
  return style;
};

// 错误过滤方法
const errorFilter = (fileName, data) => {
  let errors = data.filter((row) => !row.verify_weight);
  props.checkResult[fileName]  = errors;
  return onlyShowErrorRows.value ? errors : data;
};
</script>
